<template>

  <el-row>
    <el-col :span="24">
      <h1>后台管理主界面</h1>
    </el-col>
  </el-row>
  <el-row :gutter="5">
    <el-col :span="3">
      <el-menu
          active-text-color="#ffd04b"
          background-color="#545c64"
          class="el-menu-vertical-demo"
          default-active="2"
          text-color="#fff"
      >
        <el-sub-menu index="1">
          <template #title>
            <el-icon><Menu /></el-icon>
            <span>CSM</span>
          </template>
          <el-menu-item @click="menuClick" index="/home/contentCategory-list">内容类型管理</el-menu-item>
          <el-menu-item @click="menuClick" index="/home/content-list">内容管理</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="2">
          <template #title>
            <el-icon><Memo /></el-icon>
            <span>商品管理</span>
          </template>
          <el-menu-item @click="menuClick" index="/home/goods-category-list">商品类型管理</el-menu-item>
          <el-menu-item @click="menuClick" index="/home/goods-spe-list">商品规格</el-menu-item>
          <el-menu-item @click="menuClick" index="/home/goods-list">商品管理</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="3">
          <template #title>
            <el-icon><Memo /></el-icon>
            <span>营销</span>
          </template>
          <el-menu-item @click="menuClick" index="/home/order-list">订单列表</el-menu-item>
          <el-menu-item @click="menuClick" index="/home/order-setting">订单设置</el-menu-item>
          <el-menu-item @click="menuClick" index="/home/item-type-list">退货申请处理</el-menu-item>
          <el-menu-item @click="menuClick" index="/home/brand-list">退货原因设置</el-menu-item>
        </el-sub-menu>
      </el-menu>
    </el-col>
    <el-col :span="21">
      <router-view></router-view>
    </el-col>
  </el-row>
</template>
<script>
export default {
  data(){
    return{

    }
  },methods:{
    /**
     * 菜单的单击事件
     * @param item
     */
    menuClick(item){
      console.log(item)
      this.$router.push(item.index);
    }
  }
}
</script>
<style scoped>

</style>